import React, { Component } from 'react'
import { Button } from 'antd'

export default class UserDetail extends Component {
  constructor() {
    super()
    this.state = {
      currentTab: 'user-detail', // 'msg-record' 'login-log'
    }
  }
  render() {
    const { currentTab } = this.state
    return (
      <div className="rt-concretion">
        <div className="rt-title-banner">
          <span className="rt-text">用户详情</span>
          <i className="iconfont icon-close"></i>
        </div>
        <div className="rt-user-detail">
          <div className="rt-detail-banner">
            <div className="rt-tabs">
              <div
                className={`${currentTab === 'user-detail' ? 'rt-tab-selected' : null}`}
                onClick={() => {
                  if (currentTab === 'user-detail') return
                  this.setState({
                    currentTab: 'user-detail',
                  })
                }}
              >
                用户详情
              </div>
              <div
                className={`${currentTab === 'msg-record' ? 'rt-tab-selected' : null}`}
                onClick={() => {
                  if (currentTab === 'msg-record') return
                  this.setState({
                    currentTab: 'msg-record',
                  })
                }}
              >
                消息记录
              </div>
              <div
                className={`${currentTab === 'login-log' ? 'rt-tab-selected' : null}`}
                onClick={() => {
                  if (currentTab === 'login-log') return
                  this.setState({
                    currentTab: 'login-log'
                  })
                }}
              >
                登录日志
              </div>
          </div>
          <div className="rt-rtn-btn-box">
            <Button>返回列表</Button>
          </div>
          </div>
          <div className="rt-info">
            <div className="rt-user-avatar">
              <img alt='avatar' />
            </div>

            <div className="rt-bellow-box">
              <div className="rt-left-box">
                <div>手机号</div>
                <div>首次登录日期</div>
                <div>最后登录日期</div>
                <div>发言数</div>
                <div className="rt-level">级别</div>
                <div>状态</div>
              </div>
              <div className="rt-placeholder-container"></div>
              <div className="rt-right-box">
                <div>131****5678</div>
                <div>2016-11-03 13:04:47</div>
                <div>2016-11-03 13:04:47</div>
                <div>1,235 条</div>
                <div className="rt-level">
                  <select>
                    <option>普通用户</option>
                    <option>客服</option>
                    <option>专家</option>
                    <option>管理员</option>
                  </select>
                </div>
                <div className="rt-status-btn-group">
                  <Button className="rt-first-btn">正常</Button>
                  <Button className="rt-btn－after">禁言</Button>
                  <Button className="rt-btn－after">删除</Button>
                </div>
              </div>
            </div>

            {/*<div>
              <span>手机号</span>
              <span>131****5678</span>
            </div>

            <div>
              <span>首次登录日期</span>
              <span>2016-11-03 13:04:47</span>
            </div>

            <div>
              <span>最后登录日期</span>
              <span>2016-11-03 13:04:47</span>
            </div>

            <div>
              <span>发言数</span>
              <span>1,235 条</span>
            </div>

            <div>
              <span>级别</span>
              <span>普通用户</span>
            </div>

            <div>
              <span>状态</span>
              <div>
                <Button>正常</Button>
                <Button>禁言</Button>
                <Button>删除</Button>
              </div>
            </div>*/}
          </div>
        </div>
      </div>
    )
  }
}